{{Template:SZPT-CHINA/head}}
<html>

<head>

</head>
<!-- jquery 公共CSS-->
<script src="https://2021.igem.org/Team:SZPT-CHINA/JS/jQuery&action=raw&ctype=text/javascript"></script>
<link rel="stylesheet" href="https://2021.igem.org/Team:SZPT-CHINA/CSS/Public?action=raw&amp;ctype=text/css">

<script>
    $(document).ready(function () {
        //加载适配
        init();
        var loadImg = document.getElementById('loadImg');//选取id为test的元素
        loadImg.style.display = 'block';	// 隐藏选择的元素
    });

    var loadhidekey = 0;

    window.onload = function () {
        console.log("页面加载好了", loadhidekey)
        setTimeout(function () {

            //滑到顶部
            document.body.scrollTop = document.documentElement.scrollTop = 0;

            $("#directory").hide();
            $("#loadingHome").hide();

            document.body.append(document.getElementById('directory'))
            document.body.append(document.getElementById('head'))
            // $("#loading").hide();
        }, 10);
    }
    function animateScroll(element, speed) {
        let rect = element.getBoundingClientRect();
        //获取元素相对窗口的top值，此处应加上窗口本身的偏移
        let top = window.pageYOffset + rect.top - 100;
        let currentTop = 0;
        let requestId;
        //采用requestAnimationFrame，平滑动画
        function step(timestamp) {
            currentTop += speed;
            if (currentTop <= top) {
                window.scrollTo(0, currentTop);
                requestId = window.requestAnimationFrame(step);
            } else {
                window.cancelAnimationFrame(requestId);
            }
        }
        window.requestAnimationFrame(step);
    }



    //设置展开
    $(document).ready(function () {

        if (/Android|webOS|iPhone|iPad|iPod|BlackBerry|Windows Phone/i.test(navigator.userAgent)) {
            // mobilePage();
            designHeight = 3100;
        } else {
            //pc
            designHeight = 980;
        }
        lateHeight = document.documentElement.clientHeight;
        heightRatio = lateHeight / designHeight
        console.log("height:", heightRatio)
        console.log('1')

        document.getElementById("dir1").onclick = function () {
            // window.scrollTo(0, 350*heightRatio/0.713265306122449);
            let target = document.getElementById('content1');
            animateScroll(target, 250);
            $("#directory").show();
        }
        document.getElementById("dir2").onclick = function () {
            //window.scrollTo(0, 3500 * heightRatio / 0.713265306122449);
            let target = document.getElementById('content2');
            animateScroll(target, 250);
        }
        document.getElementById("dir3").onclick = function () {
            //window.scrollTo(0, 4300 * heightRatio / 0.713265306122449);
            let target = document.getElementById('content3');
            animateScroll(target, 250);
        }
        document.getElementById("dir4").onclick = function () {
            //window.scrollTo(0, 4300 * heightRatio / 0.713265306122449);
            let target = document.getElementById('content4');
            animateScroll(target, 250);
        }
        document.getElementById("dir5").onclick = function () {
            //window.scrollTo(0, 4300 * heightRatio / 0.713265306122449);
            let target = document.getElementById('content5');
            animateScroll(target, 250);
        }
        document.getElementById("dir6").onclick = function () {
            //window.scrollTo(0, 4300 * heightRatio / 0.713265306122449);
            let target = document.getElementById('content6');
            animateScroll(target, 250);
        }


    });
    $(window).scroll(function () {

        if ($(this).scrollTop() > 270 * heightRatio / 0.713265306122449) {
            $("#directory").show();
        } else {
            $("#directory").hide();
        }

    });
// 视频加载好
// function hideLoad() {
//     console.log("视频加载好了", loadhidekey)

//     if (loadhidekey == 1) {
//         setTimeout(function () {
//             //$("#loaderDownId").hide();
//             $("#loadingHome").hide();
//             //$("#loading").hide();
//         }, 10);
//     }
//     else if (loadhidekey == 0) {
//         loadhidekey = 1;
//     }
// }
//END-loading
</script>
<!-- jquery -->
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
<script>

    $(document).ready(function () {
        // $("#m1").hover(
        //     function () {
        //         keyPic()
        //         $("#p1").animate({
        //             height: '700px',
        //             width: '650px'
        //         }, 20);
        //         $("#bg1").attr("style", "background-color: #e2594f;float: left;width: 25%;height: 650px;");

        //     },
        //     function () {
        //         $("#p1").attr("style", "height: 650px;float: left;");
        //         $("#bg1").attr("style", "background-color: #f8c8b2;float: left;width: 25%;height: 650px;");

        //     }
        // )
        //设置默认


        var pNo = "height: 450px;width:450px;float: left;transition: all 0.3s;"
        var bgNo = "background-color: #f8c8b2;float: left;width: 25%;height: 480px;transition: all 0.3s;"
        var p = "height: 480px;width:480px;float: left;	transition: all 0.3s;"
        var bg = "background-color: #e2594f;float: left;width: 25%;height: 480px;transition: all 0.3s;"

        $("#p1").attr("style", pNo);
        $("#bg1").attr("style", bgNo);

        $("#p2").attr("style", p);
        $("#bg2").attr("style", bg);

        $("#p3").attr("style", pNo);
        $("#bg3").attr("style", bgNo);

        $("#p4").attr("style", pNo);
        $("#bg4").attr("style", bgNo);

        $("#m1").mouseover(
            function () {
                $("#p2").attr("style", pNo);
                $("#bg2").attr("style", bgNo);

                $("#p3").attr("style", pNo);
                $("#bg3").attr("style", bgNo);

                $("#p4").attr("style", pNo);
                $("#bg4").attr("style", bgNo);
                //1
                $("#p1").attr("style", p);
                $("#bg1").attr("style", bg);
            },

        ),
            $("#m2").mouseover(
                function () {
                    $("#p1").attr("style", pNo);
                    $("#bg1").attr("style", bgNo);

                    $("#p3").attr("style", pNo);
                    $("#bg3").attr("style", bgNo);

                    $("#p4").attr("style", pNo);
                    $("#bg4").attr("style", bgNo);
                    //2
                    $("#p2").attr("style", p);
                    $("#bg2").attr("style", bg);
                },
            ),
            $("#m3").mouseover(
                function () {
                    $("#p1").attr("style", pNo);
                    $("#bg1").attr("style", bgNo);

                    $("#p2").attr("style", pNo);
                    $("#bg2").attr("style", bgNo);

                    $("#p4").attr("style", pNo);
                    $("#bg4").attr("style", bgNo);
                    //3
                    $("#p3").attr("style", p);
                    $("#bg3").attr("style", bg);
                },
            ),
            $("#m4").mouseover(
                function () {
                    $("#p1").attr("style", pNo);
                    $("#bg1").attr("style", bgNo);

                    $("#p2").attr("style", pNo);
                    $("#bg2").attr("style", bgNo);

                    $("#p3").attr("style", pNo);
                    $("#bg3").attr("style", bgNo);
                    //4
                    $("#p4").attr("style", p);
                    $("#bg4").attr("style", bg);
                },
            )
        $("#m1").click(function () {
            window.location.href = "https://2021.igem.org/Team:SZPT-CHINA/Team";
        });
        $("#m2").click(function () {
            window.location.href = "https://2021.igem.org/Team:SZPT-CHINA/Attributions";
        });
        $("#m3").click(function () {
            window.location.href = "https://2021.igem.org/Team:SZPT-CHINA/Collaborations";
        });
        $("#m4").click(function () {
            window.location.href = "https://2021.igem.org/Team:SZPT-CHINA/Partnership";
        });

    });
</script>
<script>

    $(document).ready(function () {
        $("#dir1").hover(function () {
            var value = document.getElementById('dir1').getAttribute("style")
            value = value.replace(/ffffff/, "fffea4")
            $("#dir1").attr("style", value);
        }, function () {
            var value = document.getElementById('dir1').getAttribute("style")
            value = value.replace(/fffea4/, "ffffff")
            $("#dir1").attr("style", value);
        });

        $("#dir2").hover(function () {
            var value = document.getElementById('dir2').getAttribute("style")
            value = value.replace(/ffffff/, "fffea4")
            $("#dir2").attr("style", value);
        }, function () {
            var value = document.getElementById('dir2').getAttribute("style")
            value = value.replace(/fffea4/, "ffffff")
            $("#dir2").attr("style", value);
        });

        $("#dir3").hover(function () {
            var value = document.getElementById('dir3').getAttribute("style")
            value = value.replace(/ffffff/, "fffea4")
            $("#dir3").attr("style", value);
        }, function () {
            var value = document.getElementById('dir3').getAttribute("style")
            value = value.replace(/fffea4/, "ffffff")
            $("#dir3").attr("style", value);
        });
        $("#dir4").hover(function () {
            var value = document.getElementById('dir4').getAttribute("style")
            value = value.replace(/ffffff/, "fffea4")
            $("#dir4").attr("style", value);
        }, function () {
            var value = document.getElementById('dir4').getAttribute("style")
            value = value.replace(/fffea4/, "ffffff")
            $("#dir4").attr("style", value);
        });
        $("#dir5").hover(function () {
            var value = document.getElementById('dir5').getAttribute("style")
            value = value.replace(/ffffff/, "fffea4")
            $("#dir5").attr("style", value);
        }, function () {
            var value = document.getElementById('dir5').getAttribute("style")
            value = value.replace(/fffea4/, "ffffff")
            $("#dir5").attr("style", value);
        });
        $("#dir6").hover(function () {
            var value = document.getElementById('dir6').getAttribute("style")
            value = value.replace(/ffffff/, "fffea4")
            $("#dir6").attr("style", value);
        }, function () {
            var value = document.getElementById('dir6').getAttribute("style")
            value = value.replace(/fffea4/, "ffffff")
            $("#dir6").attr("style", value);
        });



    });
</script>

<body class="pc" id="main" style="font-family: 'Quicksand', sans-serif;
font-size: inherit;">


    <!-- loading -->
    <div id="loadingHome"
        style=" position: fixed; left: 0px;top: -100px; width: 100%;height: 115%;z-index: 999999999999;background-color: #f8c8b2;">
        <img id="loadImg"
            style=" position: relative; height: 6%;width: auto;left: 0%;margin :0px auto;top: 300px; text-align: center;display: none;"
            src="https://2021.igem.org/wiki/images/6/6f/T--SZPT-CHINA--iconGIF.png"></img>
    </div>
    <div id="downContent">
        <div class="mainImg">
            <div>
                <div id="bg1" style="background-color: #f8c8b2;float: left;width: 25%;">
                    <image id="p1" src="https://2021.igem.org/wiki/images/f/f5/T--SZPT-CHINA--team-members2.0.png"
                        class="smallImg"></image>
                </div>
                <div id="bg2" style="background-color: #f8c8b2;float: left;width: 25%;">

                    <image id="p2" src="https://2021.igem.org/wiki/images/b/b2/T--SZPT-CHINA--team-attributions2.0.png"
                        class="smallImg"></image>

                </div>
                <div id="bg3" style="background-color: #f8c8b2;float: left;width: 25%;">
                    <image id="p3"
                        src="https://2021.igem.org/wiki/images/b/bf/T--SZPT-CHINA--team-collaborations2.0.png"
                        class="smallImg"></image>
                </div>
                <div id="bg4" style="background-color: #f8c8b2;float: left;width: 25%;">
                    <image id="p4" src="https://2021.igem.org/wiki/images/5/5a/T--SZPT-CHINA--team-partnership2.0.png"
                        class="smallImg"></image>
                </div>
            </div>
            <div style="z-index: 99;position: absolute;">
                <image src="https://2021.igem.org/wiki/images/6/60/T--SZPT-CHINA--team-attributions.png"
                    style="margin-top: -50px;margin-left: 550px;"> </image>
            </div>
            <div style="margin-top: 50px;">
                <div id="m1" style="width: 480px;height: 480px;z-index: 9999;position: absolute;float:left;"></div>
                <div id="m2"
                    style="width: 480px;height: 480px;z-index: 9999;position: absolute;float:left;margin-left: 480px;">
                </div>
                <div id="m3"
                    style="width: 480px;height: 480px;z-index: 9999;position: absolute;float:left;margin-left: 960px;">
                </div>
                <div id="m4"
                    style="width: 480px;height: 480px;z-index: 9999;position: absolute;float:left;margin-left: 1440px;">
                </div>
            </div>

        </div>

        <!-- down -->
        <div style="width: 1920px;background-color: #ffffff;">
            <div id="blue" style="float:left; height: 6000px; width: 55px;background-color: #2588d4;">
            </div>
            <div id="directory" style="float:left;margin-top: 8vh;z-index: 990;position: fixed;">
                <div
                    style="margin-top: 9vh;background-color: #dd544d;margin-left: 6vw;border-radius:10px;padding: 1vw;width: 16vw;">
                    <h3 id="dir0p"
                        style="color:#fffea4;padding-left: 10%;font-size:1.8rem;font-family: 'Quicksand', sans-serif;">
                        Attributions</h3>
                    <div style="margin-left: 13%;">
                        <div id="dir1"
                            style="color:#ffffff; transition: all 0.3s;width: auto;height: 6vh;margin-top: 3vh;">
                            <p id="dir1p"
                                style="font-size: 1.2rem;padding-top: 0vh;">
                                Team Establishment
                            </p>
                        </div>

                        <div id="dir2" style="color:#ffffff;height:6vh;width: auto;">
                            <p id="dir2p"
                                style="transition: all 0.3s;font-size: 1.2rem;padding-top: 0vh;">
                                Team members
                            </p>
                        </div>

                        <div id="dir3" style="color:#ffffff;width: auto;height: 6vh;">
                            <p id="dir3p"
                                style="transition: all 0.3s;font-size: 1.2rem;padding-top: 0vh;">
                                PIs</p>
                        </div>

                        <div id="dir4" style="color:#ffffff;width: auto;height:6vh;">
                            <p id="dir4p"
                                style="transition: all 0.3s;font-size:1.2rem;padding-top: 0vh;">
                                Instructors
                            </p>
                        </div>

                        <div id="dir5" style="color:#ffffff;width: auto;height: 6vh;">
                            <p id="dir5p"
                                style="font-size: 1.2rem;padding-top: 0vh;">
                                Advisors
                            </p>
                        </div>


                        <div id="dir6"
                            style="color:#ffffff;width: auto;height: 8vh;border-bottom-right-radius:10px;border-bottom-left-radius:10px;">
                            <p id="dir6p"
                                style="font-size: 1.2rem;padding-top: 0vh;font-family: 'Quicksand', sans-serif;">
                                Acknowledgments</p>
                        </div>
                    </div>
                </div>
            </div>
            <div class="content"
                style="float:left;width: 1173px;margin-left: 397px;margin-top: 100px;padding-left:100px;background-color: #ffffff;text-align: justify;">

                <div id="content1" class="yj">● Team Establishment
                </div>

                <div style="margin-left:40px;margin-top: 50px;">
                    <div class="pb">
                        Our team was established in January 2021 (Click here to read our <a
                            href="https://2021.igem.org/Team:SZPT-CHINA/Notebook">【Notebook】</a>). After brainstorming,
                        we
                        determined that our project would focus on burn treatment. (Click here to learn more about our
                        project<a href="https://2021.igem.org/Team:SZPT-CHINA/Description">【Description】</a>).
                    </div>
                </div>

                <div id="content2" class="yj">● Team Members

                </div>

                <div style="margin-left:40px;margin-top: 50px;">
                    <div class="pb">
                        We are a team of 14 students. None of us was experts in synthetic biology, art design, etc.
                        Therefore,
                        we received intensive training to learn all aspects of skills during the winter holidays. Below
                        are
                        our
                        team members without whom nothing would have been possible.
                    </div>
                </div>

                <div style="font-size:240%;margin-top: 50px;font-family: 'Quicksand', sans-serif;">
                    ✧ Team leaders:
                </div>
                <div style="margin-left:40px;margin-top: 50px;">
                    <div class="ps">
                        <strong>Wanting Liu:</strong>
                        She led the team throughout this year and participating in every aspect of our project. She
                        is the team keeper and reminded us about all the deadlines.
                    </div>
                    <div class="ps">
                        <strong>Chun Zheng:</strong> As the director of Artist Group, she has mastered the main part of
                        our team's art design. She has a bias for action rather than waiting or overthinking.
                    </div>
                    <div class="ps">
                        <strong>Min Zhang:</strong> She is the key person at HP and is responsible for many human
                        practices
                        and
                        education activities. Her mind is full of creative ideas.
                    </div>
                </div>

                <div style="font-size:240%;margin-top: 50px;font-family: 'Quicksand', sans-serif;">
                    ✧ Experimental Group:
                </div>
                <div style="margin-left:40px;margin-top: 50px;">
                    <div class="ps">
                        <strong>Yingnan Liang:</strong> She is responsible for the main experiments and data processing.
                    </div>
                    <div class="ps">
                        <strong>Jiamei Zhao:</strong> She is responsible for the main experiments and the daily lab
                        management.
                    </div>
                    <div class="ps">
                        <strong>Yuetong Chen:</strong> She is in charge of <i>E. coli</i> experiments，prototype-related
                        experiments, and provide
                        basic experimental materials.
                    </div>
                    <div class="ps">
                        <strong>Peixin Chen:</strong> She is responsible for <i>E. coli</i> and safety management.
                    </div>
                </div>
                <div style="font-size:240%;margin-top: 50px;font-family: 'Quicksand', sans-serif;">
                    ✧ Human Practice Group：
                </div>
                <div style="margin-left: 40px;margin-top: 50px;">
                    <div class="ps">
                        <strong>Guiyi Huang:</strong> She is responsible for contacting experts and participated in
                        human
                        practices and
                        education activities in the early stage. In the later stage, she shifted to the experimental
                        group,
                        undertook the task of part page editing to be qualified as the speak of our presentation.
                    </div>
                    <div class="ps">
                        <strong>Zhibing Mai:</strong> She is responsible for contacting and interviewing experts and
                        participating in
                        educational activities.
                    </div>
                    <div class="ps">
                        <strong>Bingmin Lin:</strong> She is responsible for outreach activities, participated in
                        education
                        activities, and
                        she is also the speaker of our presentation.
                    </div>
                    <div class="ps">
                        <strong>Hongwei Zhu:</strong> He is responsible for communicating with other teams and
                        participated
                        in the art design
                        part. Moreover, he completed the modeling part for our project.
                    </div>

                </div>
                <div style="font-size:240%;margin-top: 50px;font-family: 'Quicksand', sans-serif;">
                    ✧ Art Design Group：
                </div>
                <div style="margin-left: 40px;margin-top: 50px;">
                    <div class="ps">
                        <strong>Feifei Zhu:</strong> She is mainly responsible for PPT design and video editing, and she
                        is
                        also the speaker
                        of our presentation.
                    </div>
                    <div class="ps">
                        <strong>Liqun Huang:</strong> He is responsible for the Wiki design part.
                    </div>
                    <div class="ps">
                        <strong>Yuntao Zheng:</strong> He is responsible for Wiki setup and hardware.
                    </div>
                </div>

                <div id="content3" class="yj">● PIs

                </div>

                <div style="margin-left: 40px;margin-top:50px;">
                    <div class="ps">
                        <strong>Jingjing Wei(Primary PI):</strong> She is the key person in our project. She often
                        communicated with us. When
                        we encountered difficulties, she led us to solve problems and find solutions.
                    </div>
                    <div class="ps">
                        <strong>Hongbo Liu(Secondary PI):</strong> Dr. Liu helps us a lot. He always cares about the
                        progress of the project.
                        If we meet with difficult problems, we will turn to him for help.
                    </div>
                </div>
                <div id="content4" class="yj">●
                    Instructors

                </div>
                <div style="margin-left: 40px;margin-top:50px;">
                    <div class="ps">
                        <strong>Yanmei Gao:</strong> She is our instructor in the design and implementation of the
                        experiments, and gave us
                        guidance and help when we encountered difficulties and setbacks in the experiments.
                    </div>
                    <div class="ps">
                        <strong>Xiaochen Xing:</strong> She is our instructor in human practices and art design, gave us
                        guidance and advice when
                        we encountered difficulties and setbacks in HP.
                    </div>
                </div>
                <div id="content5" class="yj">●
                    Advisors

                </div>

                <div style="margin-left: 40px;margin-top:50px;">
                    <div class="ps">
                        <strong>Shiyi Chen:</strong> She was the leader of the team last year. She has rich experience
                        in
                        leading teams
                        and gave a guidance to our team.
                    </div>
                    <div class="ps">
                        <strong>Jianhua Zhou:</strong> He was a member of the experimental group last year, and he has
                        an
                        experimental
                        basis. In the early stage, he trained the experimental group members in experimental skills.
                    </div>
                    <div class="ps">
                        <strong>Xiaoqi Ye:</strong> She was a member of the experimental group last year. She has rich
                        knowledge of
                        synthetic biology and taught our team about it in the early stage.
                    </div>
                    <div class="ps">
                        <strong>Ruixin Lin:</strong> He was a member of the experimental group last year. He has a
                        biological basis and
                        taught our team biological knowledge tin the early stage.
                    </div>
                    <div class="ps">
                        <strong>Jiawei Huang:</strong> He was a member of the experimental group the year before last.
                        He
                        has an
                        experiment basis and has trained experimental group members in experimental skills in the early
                        stage.
                    </div>
                    <div class="ps">
                        <strong>Lizhen Zhu:</strong> He was a member of the experimental team last year. In pre-training
                        he
                        helped us
                        interpret the experimental parts of the excellent teams in previous years.
                    </div>
                    <div class="ps">
                        <strong>Lixing Li:</strong> She was a member of the human practices group last year. In
                        re-training
                        she led us to
                        understand the content of human practices.
                    </div>
                    <div class="ps">
                        <strong>Dong Yang, Yetong Yang:</strong> They were both members of the human practices group
                        last
                        year. And They
                        helped us during the project process and gave us advice for our activities.
                    </div>
                </div>
                <div id="content6" class="yj">●
                    Acknowledgments


                </div>

                <div style="margin-left: 40px;margin-top: 50px;">
                    <div class="pb">
                        Thanks to PIs and the instructors for their guidance, to the advisors for their help, and to
                        every
                        team
                        member for their efforts, so that our project progressed beyond our original expectation.
                    </div>
                </div>

            </div>
            <div id="red" style="float: left;margin-left: 140px; height: 6000px;width: 55px;background-color: #d44225;">
            </div>
        </div>
        <image src="https://2021.igem.org/wiki/images/8/8d/T--SZPT-CHINA--bottomPic.png" class="pic"
        style="margin-top: -372px;width: 1920px;"></image>

    </div>
</body>

<script>
    var bodyStyle = document.createElement('style')
    var docWidth, docHeight;
    var designWidth, designHeight;

    // 屏幕缩放实现
    function refreshScale() {
        bodyStyle.innerHTML = `body{width:${designWidth}px; height:${designHeight}px!important;}`
        document.documentElement.firstElementChild.appendChild(bodyStyle)
        document.getElementById('main').style = 'display:flex'
        //document.getElementsByClassName('mobile')[0].style = 'display:none'

        var widthRatio = docWidth / designWidth,
            heightRatio = docHeight / designHeight;
        var topRatio = 26 * heightRatio;
        //heightRatio=0.782222;
        //解决因transform导致margin-top
        document.getElementById('content').style = `transform:scale(${widthRatio},${heightRatio});transform-origin:left top;margin-top: -${topRatio}px;`;
        // 应对浏览器全屏切换前后窗口因短暂滚动条问题出现未占满情况
        setTimeout(function () {
            var lateWidth = document.documentElement.clientWidth,
                lateHeight = document.documentElement.clientHeight;
            if (lateWidth === docWidth) return;

            widthRatio = lateWidth / designWidth
            heightRatio = lateHeight / designHeight
            document.getElementById('content').style = "transform:scale(" + widthRatio + "," + heightRatio + ");transform-origin:left top;margin-top: -${topRatio}px;"
        }, 0)
    }

    // 清除scale
    function clearScale() {
        // 清除pc样式
        bodyStyle.innerHTML = ``
        document.documentElement.firstElementChild.appendChild(bodyStyle)
        document.body.style = "transform:none;transform-origin:none"
    }

    // 初始化
    function init() {
        // 获取当前屏幕可视区域大小
        docWidth = document.documentElement.clientWidth;
        docHeight = document.documentElement.clientHeight;
        // 判断是否是移动设备
        if (/Android|webOS|iPhone|iPad|iPod|BlackBerry|Windows Phone/i.test(navigator.userAgent)) {

            // mobilePage();
            let mainClass = document.getElementById('main').classList;
            designWidth = 1920;
            designHeight = 3100;
            mainClass.add('pc');
            mainClass.remove('large');

            //document.getElementById('mainImg').style = "margin-top:45px";
            
            var value = document.getElementById('blue').getAttribute("style")
            value = value.replace(/6000/, "8000")
            $("#blue").attr("style", value);

            var value = document.getElementById('red').getAttribute("style")
            value = value.replace(/6000/, "8000")
            $("#red").attr("style", value);

            //手机适配目录
            var value = document.getElementById('dir1').getAttribute("style")
            value = value.replace(/6vh/, "2vh")
            $("#dir1").attr("style", value);

            //适配top
            var value = document.getElementById('dir1').getAttribute("style")
            value = value.replace(/3vh/, "1vh")
            $("#dir1").attr("style", value);


            var value = document.getElementById('dir2').getAttribute("style")
            value = value.replace(/6vh/, "2vh")
            $("#dir2").attr("style", value);

            var value = document.getElementById('dir3').getAttribute("style")
            value = value.replace(/6vh/, "2vh")
            $("#dir3").attr("style", value);

            var value = document.getElementById('dir4').getAttribute("style")
            value = value.replace(/6vh/, "2vh")
            $("#dir4").attr("style", value);

            var value = document.getElementById('dir5').getAttribute("style")
            value = value.replace(/6vh/, "2vh")
            $("#dir5").attr("style", value);

            var value = document.getElementById('dir6').getAttribute("style")
            value = value.replace(/8vh/, "2vh")
            $("#dir6").attr("style", value);

            var value = document.getElementById('dir0p').getAttribute("style")
            value = value.replace(/1.8rem/, "1.3rem")
            $("#dir0p").attr("style", value);

            var value = document.getElementById('dir1p').getAttribute("style")
            value = value.replace(/1.2rem/, "0.9rem")
            $("#dir1p").attr("style", value);

            var value = document.getElementById('dir2p').getAttribute("style")
            value = value.replace(/1.2rem/, "0.9rem")
            $("#dir2p").attr("style", value);

            var value = document.getElementById('dir3p').getAttribute("style")
            value = value.replace(/1.2rem/, "0.9rem")
            $("#dir3p").attr("style", value);

            var value = document.getElementById('dir4p').getAttribute("style")
            value = value.replace(/1.2rem/, "0.9rem")
            $("#dir4p").attr("style", value);

            var value = document.getElementById('dir5p').getAttribute("style")
            value = value.replace(/1.2rem/, "0.9rem")
            $("#dir5p").attr("style", value);


            var value = document.getElementById('dir6p').getAttribute("style")
            value = value.replace(/1.2rem/, "0.9rem")
            $("#dir6p").attr("style", value);


            refreshScale()
        } else {
            //pc
            let mainClass = document.getElementById('main').classList;
            designWidth = 1920;
            designHeight = 930;
            mainClass.add('pc');
            mainClass.remove('large');
            refreshScale()

        }
    }

    // 大屏设置 rem 函数
    function setRem(designSize) {
        // 基准大小
        baseSize = 100;
        let basePc = baseSize / designSize; // 表示1680的设计图,使用100PX的默认值
        let vW = window.innerWidth; // 当前窗口的宽度

        let rem = vW * basePc; // 以默认比例值乘以当前窗口宽度,得到该宽度下的相应font-size值
        document.documentElement.style.fontSize = rem + "px";
    }



    // 移动端页面
    function mobilePage() {
        clearScale()
        // 是移动设备 展示移动设备页
        //document.getElementById('main').style = 'display:none'
        //document.getElementsByClassName('mobile')[0].style = 'display:flex'
        // mobile 设置 rem 函数
        let designSize = 750;
        setRem(designSize);


    }

    // 初始化
    //init();

    // 监听前进/后退以及load事件触发
    window.addEventListener("pageshow", function (e) {
        if (e.persisted) { // 浏览器后退的时候重新计算
            init()
        }
    }, false);

    // 监听屏幕缩放
    window.addEventListener("resize", function () {
        init()
    }, false);
</script>
<!-- END-适配 -->





</html>